<template>
    <div>
        <van-nav-bar title="标题" left-text="返回" left-arrow>
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="电话" label="电话" placeholder="请填写电话"
                    :rules="[{ required: true, message: '请填写电话' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
        </van-form>
        <div class="but">
            <van-button type="primary" @click="onSubmit" class="btt">登录</van-button>
        </div>
        <div class="jump">
            还没有账号? <span @click="jump">去注册</span>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { showDialog } from 'vant';
// 导入router 使用router跳转
import { useRouter } from 'vue-router'
import { loginname } from '../api/login'
const router = useRouter()
let username = ref('')
let password = ref('')

const onSubmit = async () => {
    // 登录
    let res = await loginname(username.value, password.value)
    console.log(res);

    if (res.code == '10010') {
        showDialog({
            title: '标题',
            message: res.message,
        })
        return
    }
    if (res.code == '10011') {
        showDialog({
            title: '标题',
            message: res.message,
        })
        return
    }
    let tc = await showDialog({
        title: '标题',
        message: res.message,
    })
    // 设置token
    localStorage.setItem('token', res.data.token)
    // 取出用户名
    localStorage.setItem('userid', res.data.userid)
    router.push({name:'admin'})
};

const jump = () => {
    router.push({ name: 'register' })
}

</script>
<style scoped>
.but {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.btt {
    width: 100%;
    border-radius: 25px;
}

.jump {
    text-align: right;
    font-size: 12px;
    padding-right: 20px;
}

.jump>span {
    color: red;
}
</style>